<script setup>
import { onMounted, ref } from "vue"
import { household } from "@/js/request_params"
import { get_json_object } from "@/js/area"
import { disabledOperator, selectAllPolice, enableOperator, registeredPoliceStation, addOperator, changeOperator } from "@/api/police_station";
import { level } from "@/js/base_info_map";
import { ElMessage } from "element-plus";

const operator_form = ref();
const operator_info = ref({
  id: '',
  name: '',
  idnum: '',
  levelId: '',
  username: '',
  password: '',
  pid: '',
});
const refCascader = ref();
let json_object = ref([]);
const service_form = ref();
const drawer = ref(false);
const operator_disabled = (row_params) => {
  console.log(row_params);
  disabledOperator(row_params).then((res) => {
    ElMessage.success({
      message: res.msg,
      duration: 3000
    })
  })
  police_stations.value.forEach((police) => {
    if (police.pid == row_params.pid) {
      police.operators.forEach((operator) => {
        if (operator.id == row_params.id) {
          operator.isDelete = 1;
        }
      })
    }
  })
}
const operator_enabled = (row_params) => {
  console.log(row_params);
  enableOperator(row_params).then((res) => {
    ElMessage.success({
      message: res.msg,
      duration: 3000
    })
  })
  police_stations.value.forEach((police) => {
    if (police.pid == row_params.pid) {
      police.operators.forEach((operator) => {
        if (operator.id == row_params.id) {
          operator.isDelete = 0;
        }
      })
    }
  })
}
const operator_change = () => {
  changeOperator(operator_info.value).then((res) => {
    ElMessage.success({
      message: res.msg,
      duration: 3000
    })
    changeLevel.value = false;
    try {
      police_stations.value.forEach((police) => {
        if (police.pid === operator_info.value.pid) {
          police.operators.forEach((operator) => {
            if (operator.id === operator_info.value.id) {
              operator.level = level.value[operator.levelId]
            }
          })
        }
      })
    }
    catch (error) {
      resetOperatorInfo()
      console.log(police_stations.value);
    }
  })
}

const operator_add = () => {
  addOperator(operator_info.value).then((res) => {
    ElMessage.success({
      message: res.msg,
      duration: 3000
    })
    add_operator.value = false;
    police_stations.value.forEach((police) => {
      if (police.pid == operator_info.value.pid) {
        police.operators.forEach((operator) => {
          if (operator.id == operator_info.value.id) {
            operator.levelId = res.result.levelId;
            operator.level = level.value[operator.levelId]
          }
        })
      }
    })
    resetOperatorInfo()
  })
}

const resetOperatorInfo = () => {
  let keys = Object.keys(operator_info.value);
  keys.forEach((key) => {
    operator_info.value[key] = ''
  })
}

const police_handle_click = async (row_params) => {
  add_operator.value = true;
  operator_info.value.pid = row_params.pid;
}
const change_handle_click = (row_params) => {
  console.log(row_params);
  changeLevel.value = true
  operator_info.value = row_params;
}
const handleChange = async (value) => {
  police_params.value.address = "河北省";
  let node_array = refCascader.value.getCheckedNodes()[0].pathNodes;
  node_array.forEach((node) => {
    police_params.value.address += node.label;
  })
  console.log(police_params.value.address);
  police_params.value['PNum'] = value[value.length - 1];
}
const add_police = () => {
  registeredPoliceStation(police_params.value).then((res) => {
    ElMessage.success({
      message: res.msg,
      duration: 3000
    })
  })
}
const add_operator = ref(false);
const changeLevel = ref(false);
household.value.housetypeId = 1;
const police_params = ref({
  "name": '',
  'address_code': '',
  "address": '',
  'PNum': ''
})

const police_stations = ref([{
  'pnum': '1',
  'name': '1',
  'address': '1',
  'operators': [
    {
      'name': '2',
      'levelId': '21',
      'level': '',
      'idnum': '12',
    }
  ]
},
{
  'pnum': '1',
  'name': '1',
  'address': '1',
  'operators': [
    {
      'name': '1',
      'levelId': '1',
      'level': '',
      'idnum': '1',
    }
  ]
},
{
  'pnum': '1',
  'name': '1',
  'address': '1',
  'Operator': [
    {
      'name': '1',
      'levelId': '1',
      'level': '',
      'idnum': '1',
    }
  ]
},
{
  'pnum': '1',
  'name': '1',
  'address': '1',
  'operators': [
    {
      'name': '1',
      'levelId': '1',
      'level': '',
      'idnum': '1',
    }
  ]
}
])
onMounted(async () => {
  let police_response = await selectAllPolice();
  police_stations.value = police_response.result;
  police_stations.value.forEach((police) => {
    police.operators.forEach((operator) => {
      operator.level = level.value[operator.levelId]
    })
  })
  let response = await get_json_object()
  json_object.value.push(response);

})
</script>
<template>
  <!-- 表单 -->
  <el-dialog v-model="add_operator" title="新增警员" width="800">
    <el-form class="mx-[50px]   grid  grid-cols-2 gap-x-5 -gap-y-1  relative justify-items-center items-center"
      :model="operator_info" ref="operator_form" :rules="rules">
      <el-form-item label="姓名:">
        <el-input v-model="operator_info.name" placeholder="请填写内容" style="width: 180px">
        </el-input>
      </el-form-item>
      <el-form-item label="身份证号:">
        <el-input v-model="operator_info.idnum" placeholder="请填写内容" style="width:180px"></el-input>
      </el-form-item>
      <el-form-item label="帐号:">
        <el-input v-model="operator_info.username" placeholder="请填写内容" style="width:180px"></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="operator_info.password" placeholder="请填写内容" style="width:180px"></el-input>
      </el-form-item>
      <el-form-item label="等级:">
        <el-select v-model="operator_info.levelId" placeholder="请选择">
          <el-option v-for="index in Object.keys(level).length" :key="index" :label="level[index]"
            :value="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="add_operator = false">取消</el-button>
        <el-button type="primary" @click="operator_add">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="changeLevel" title="更改警员等级" width="800">
    <el-form class="mx-[50px]   grid  grid-cols-2 gap-x-5 -gap-y-1  relative justify-items-center items-center"
      :model="operator_info" ref="operator_form" :rules="rules">
      <el-form-item label="等级:">
        <el-select v-model="operator_info.levelId" placeholder="">
          <el-option v-for="index in Object.keys(level).length" :key="index" :label="level[index]"
            :value="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeLevel = false">取消</el-button>
        <el-button type="primary" @click="operator_change">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <div class="w-[100%] h-[100%] flex justify-center">
    <div class="card w-[100%] h-[100%] flex justify-center">
      <spa class="span"></spa>
      <span class="span"></span>
      <span class="span"></span>
      <spa class="span"></spa>
      <div class="shell shadow-xl" style="width:90%;height:90%">
        <svg class="check" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">

          <path
            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z">
          </path>
        </svg>
        <p class="tracking-[10px] text-[20px] font-[800] text-black">派出所人员管理</p>
        <el-scrollbar max-height="400px">
          <div class="w-[100%] h-[70%] flex justify-center items-start mt-[10px]">
            <el-table :data="police_stations" border>
              <el-table-column type="expand">
                <template #default="props">
                  <el-table :data="props.row.operators" border>
                    <el-table-column prop="name" label="姓名" width="300" />
                    <el-table-column prop="level" label="职称" width="300" />
                    <el-table-column prop="idnum" label="身份证号" width="300" />>
                    <el-table-column fixed="right" label="操作">
                      <template #default="scope">
                        <el-button v-if="scope.row.isDelete == 0" link type="danger" size="default"
                          @click="operator_disabled(scope.row)">
                          禁用
                        </el-button>
                        <el-button v-if="scope.row.isDelete == 1" link type="primary" size="default"
                          @click="operator_enabled(scope.row)">
                          复用
                        </el-button>
                        <el-button link type="primary" size="default" @click="change_handle_click(scope.row)">
                          修改
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column prop="pnum" label="警局号" />
              <el-table-column prop="name" label="派出所名称" />
              <el-table-column prop="address" label="地址" />
              <el-table-column fixed="right" label="操作">
                <template #default="scope">
                  <el-button link type="primary" size="default" @click="police_handle_click(scope.row)">
                    新增人员
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
        <hr>
        <div class="mx-[20px]  relative top-2  flex justify-around items-center">
          <el-form class="grid  grid-cols-3 gap-x-5 -gap-y-1  relative justify-items-center items-center"
            :model="household" ref="service_form" :rules="rules">
            <el-form-item label="派出所:">
              <el-input v-model="police_params.name" placeholder="请填写内容"></el-input>
            </el-form-item>
            <el-form-item label="地址:">
              <el-cascader ref="refCascader" v-model="police_params.address_code" :options="json_object"
                @change="handleChange" />
            </el-form-item>
            <el-form-item label="编号:">
              <el-input v-model="police_params.PNum" disabled></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" plain @click="add_police">新增</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url(../css/form_card.css);

.el-table {
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-row-hover-bg-color: transparent;
  --el-table-header-bg-color: transparent;
}

.el-table :deep(.el-table__cell) {
  background-color: transparent
}

.el-form {
  height: 70%;
}

:deep(.el-input__wrapper:hover) {
  --tw-ring-color: rgb(233 213 255);
  box-shadow: var(--tw-ring-inset) 0 0 3px calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  scale: 1.03;
}

:deep(.el-input__wrapper) {
  transition: all 500ms;
}

.el-input :deep(.el-input__wrapper.is-focus) {
  --tw-ring-color: rgb(216 180 254);
  --tw-ring-offset-color: #84f2fc;
  box-shadow: var(--tw-ring-inset) 0 0 3px calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

}

.el-input :deep(.el-input__wrapper) {
  transition: all 500ms;
}

.el-input,
.el-select {

  width: 180px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

:deep(.el-form-item__label) {
  text-shadow: 1px 2px 2px rgba(165, 165, 165, 0.8);
}

.el-form-item:nth-child(1) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(2) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(3) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}

.el-form-item:nth-child(4) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 12px;
}

.el-form-item:nth-child(5) :deep(.el-form-item__label) {
  position: relative;
  right: 0;
  letter-spacing: 2px;
}
</style>
